<template>
 
 <div class="rank">
   <nav1></nav1>
    <div class="listnav">
   
      <div class="liatnav-left">
        <div class="top">
          <ul>
           <li v-for="(item,index) in list1" :key="index" @click="send(index,item.id,item.topTitle)" :class="{active:index==num}">
            <p> {{item.topTitle}}
             </p>
           
           </li>
          </ul>
        </div>
        <div class="meddle">


        </div>
      </div>
      <div class="right" >
        <div>
          
          <h1>{{ListName}}</h1>
        </div>
        <div class="right-meddle">
          <ul>
            <li class="li1"><i class="fa fa-play-circle"></i><span>播放全部</span></li>
            <li><i class="fa fa-plus-square"></i><span>添加</span></li>
            <li><i class="fa fa-heart"></i><span>收藏</span></li>
            <li><i class="fa fa-commenting-o"></i><span>评论</span></li>
          </ul>
        </div>
        <div class="list">
          <div class="list-top">
            <ul>
              <li>序号</li>
              <li>歌曲</li>
              <li>歌手</li>
              <li style="margin-right:30px ;">专辑</li>
              
            </ul>
          </div>
          <div class="list__">
            <ul>
              <li v-for="(item,index) in singerlist.songlist" :key="index">
                <p class="p3">{{index+1}}</p>
                
               <div>
                 
                 <p class="p1" @click="song(item.data.songmid,item.data.singer[0].name)">{{item.data.songname}}</p>
               </div>
                <p class="p2"  >{{item.data.singer[0].name}}</p>
                
                <p class="p3">{{item.data.albumname}}</p>
                
              </li>
            </ul>
          </div>
           <div class="key">
            <el-input-number v-model="num1" @change="handleChange" :min="1"></el-input-number>
       </div>
        </div>
      </div>
      
  </div>
 </div>
</template>

<script>
import nav1 from '../../components/nav'
import {mapState} from 'vuex'
import {list,listnav} from '../../api/ranklist'
export default {
  components:{
    nav1
  },
  data(){
    return {
      list1:[],
       num1: 1,
      num:0,
      id:'4',
      ListName:'巅峰榜·流行指数',
      singerlist:[]
    
    }
  },
  methods:{
    handleChange(){
      localStorage.setItem('page',this.num1)
    },

    Bangdan(){
      this.axios.get(`${list}/v8/fcg-bin/fcg_myqq_toplist.fcg?g_tk=5381&uin=0&format=json&inCharset=utf-8&outCharset=utf-8&notice=0&platform=h5&needNewCode=1&_=1512554796112%20`)
      .then((res) => {
          // console.log(res.data.data.topList);
          this.list1=res.data.data.topList
      }).catch((err) => { 
        console.log(err);
      });
    },
    send(i,j,s){
      this.shows=i
      this.num=i
      this.id=j
      this.ListName=s
      console.log(this.id);
      this.$router.push({
        path:'/ranklist',
        query:{
          id:j
        }
      })
    },
    song(i,j){
        console.log(i,j);
        this.$router.push({
          path:'/song',
          query:{
            song:i,
            name:j
          }
        })
    },
    songlist(){
      this.axios.get(`${listnav}${this.id}&_=1512563984096`).then(res=>{
        console.log(res.data);
        this.singerlist=res.data
      }).catch(err=>{
        console.log(err);
      })
    }

  },
  
  created(){
    this.songlist()
    this.Bangdan()
    this.handleChange()
  
  },
  watch:{
   id:{
      handler(i){
        this.songlist()
      }
    },
    
  },

  
}
</script>

<style lang="scss" scoped>
.listnav{
  width: 1400px;
  display: flex;
  // justify-content: space-evenly;
  
  .list{
    
    //  height: 1300px;
     overflow: hidden;
  }
   
  width: 1400px;
  margin: 0 auto;
  margin-top: 100px;
  .top{
  
   ul{
     width: 300px;
     text-align: center;
      margin-left: 20px;
      // border: 1px solid;
      li{
       
        // border: 1px solid;
         
       width: 180px;
        p{
           height: 40px;
         line-height: 40px;
          margin-top: 10px;
        }
        
      }
   }
  }
  .meddle{
    margin-top: 20px;
    ul{
     li{
       overflow: hidden; 
       margin-top: 20px;
     }
    }
    span{
      display: block;
      font-weight: 800;
      margin-bottom: 15px;
      margin-right: 20px;
    }
    img{
      margin-right: 20px;
      float: left;
      width: 60px;
      height: 60px;
    }
  }
  
.right{
  margin-left: 10%;
 
 .right-meddle{
  
    ul{
      display: flex;
      margin-top: 20px;
      li{
        width: 150px;
        border: 1px solid #eee;
        text-align: center;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        margin-right: 40px;
        
        
      }
    }
  }
  }
 .list-top{
   
   ul{
    
     margin-top: 20px;
     display: flex;
     justify-content: space-between;
     li{
       color: #3636;
     }
   }
 }
}
.list__{
 height: 1200px;
 overflow: hidden;
  ul{
    li{
      display: flex;
      line-height: 60px;
      justify-content: space-between;


    
     p{
         width: 80px;
        overflow: hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
     }
      .p1{
        width: 100px;
        text-align: center;
       margin-left: 10px;
        
        
      }
      .p2{
         margin-left: 40px;
        width: 100px;
        overflow: hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
        
      }
      p3{
        margin-left: 40px;
      }
     
     
      
    }
  }
}
.key{
  width: 200px;
  margin: 0 auto;
}
.li1{
         background-color: #ffe12c;
        }
.active{
   background-color: #ffe12c;
  font-weight: 800;
  
 }
</style>